<template>
  <div>
    <el-table :data="tableData" border style="width: 100%" size="mini">
      <el-table-column label="表达式" width="220">
        <template slot-scope="scope">
          <el-input
            clearable
            v-model="scope.row.expression"
            size="mini"
            placeholder="content.data.list.1.nickname"
          ></el-input>
        </template>
      </el-table-column>

      <el-table-column label="断言方式" width="200">
        <template slot-scope="scope">
          <el-autocomplete
            class="inline-input"
            v-model="scope.row.comparator"
            :fetch-suggestions="querySearch"
            clearable
            size="mini"
            placeholder="equals or eq"
          ></el-autocomplete>
        </template>
      </el-table-column>

      <el-table-column label="预期结果" width="280">
        <template slot-scope="scope">
          <el-input
            clearable
            v-model="scope.row.expect"
            size="mini"
            placeholder="louie"
          ></el-input>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-circle-plus-outline"
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            style="border:none"
          >
          </el-button>

          <el-button
            icon="el-icon-delete"
            size="mini"
            v-show="scope.$index !== 0"
            @click="handleDelete(scope.$index, scope.row)"
            style="border:none"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { isEmpty, cloneDeep } from "lodash";

export default {
  name: "ResponseValidate",
  props: ["validate"],
  components: {},
  computed: {},
  watch: {},
  created() {
    this.tableData = isEmpty(this.validate) ? this.defaultValue : this.validate;
  },
  mounted() {},
  methods: {
    emitValidate() {
      return this.tableData;
    },

    handleEdit(index, row) {
      this.tableData.push({
        expression: "",
        comparator: "",
        expect: ""
      });
    },

    initData() {
      this.tableData.splice(0, this.tableData.length, {
        expression: "",
        comparator: "",
        expect: ""
      });
    },

    handleDelete(index, row) {
      this.tableData.splice(index, 1);
    },

    // 输入框中查询的方法
    querySearch(queryString, cb) {
      let validateType = this.validateType;
      let results = queryString
        ? validateType.filter(this.createFilter(queryString))
        : validateType;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },

    createFilter(queryString) {
      return validateType => {
        return (
          validateType.value
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      };
    }
  },
  data() {
    return {
      defaultValue: [
        {
          expression: "",
          comparator: "",
          expect: ""
        }
      ],
      tableData: [],
      validateType: [
        {
          value: "equals"
        },
        {
          value: "less_than"
        },
        {
          value: "less_than_or_equals"
        },
        {
          value: "greater_than"
        },
        {
          value: "greater_than_or_equals"
        },
        {
          value: "not_equals"
        },
        {
          value: "string_equals"
        },
        {
          value: "length_equals"
        },
        {
          value: "length_greater_than"
        },
        {
          value: "length_greater_than_or_equals"
        },
        {
          value: "length_less_than"
        },
        {
          value: "length_less_than_or_equals"
        },
        {
          value: "contains"
        },
        {
          value: "contained_by"
        },
        {
          value: "type_match"
        },
        {
          value: "regex_match"
        },
        {
          value: "startswith"
        },
        {
          value: "endswith"
        }
      ]
    };
  }
};
</script>

<style lang="less"></style>
